<template>
    <div>
        <div class="page">
            <el-button type="button" @click="jumpFirstPage" class="my-btn">首页</el-button>
            <el-pagination
                background
                ref="pagination"
                layout="prev, pager, next, slot"
                prev-text="上一页"
                next-text="下一页"
                @current-change="handleCurrentChange"
                style="display:inline-block;padding-left: 0px;"
                :current-page="c_page"
                :page-size="10"
                :total="total">
            </el-pagination>
            <el-button type="button" @click="jumpLastPage" class="my-btn" style="margin: 0px 0px">尾页</el-button>
    </div>
    </div>
</template>

<script>
    export default {
        props:{
            currentPage:{
                type:Number
            },
            total:{
                type:Number
            }
        },
        data() {
            return {
                c_page: this.currentPage,
            }
        },

        methods: {
            handleCurrentChange(cpage) {
                this.c_page = cpage;
                this.$emit('handleCurrentChange', this.c_page);
            },
            jumpFirstPage () {
                this.$refs.pagination.handleCurrentChange(1);
                this.$emit('handleCurrentChange', 1);
            },
            jumpLastPage () {
                let font = this.$refs.pagination
                let cpage = Math.ceil(font.total / font.pageSize);
                font.handleCurrentChange(cpage);
            }
        },
    }
</script>

<style lang="less" scoped>
.el-pagination{
    margin-top: 40px;
    color: #666666 !important;
}
.el-pagination > button {
    padding: 3px !important;
}
.el-pagination.is-background .el-pager li{
    height: 34px !important;
    color: #666666 !important;
}
.my-btn{
    height: 28px;
    line-height: 0;
    border: none;
    color: #666666;
    background: #F0F1F6 !important;
}
.page{
    text-align: right;
    line-height: 28px;
}
@deep: ~'>>>';
    //样式修改
    @{deep}.el-pager{
        .number,.el-icon{
            height: 28px;
            padding-left: 11px;
            padding-right: 11px;
            font-size: 12px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
            line-height: 28px;
            border-radius: 4px 4px 4px 4px !important;
        }
        .number{
            color: #666666;
        }
        .number:not(.disabled).active{
            background: #165bff !important;
        }
        .el-icon{
            background: #F0F1F6 !important;
            color: #666666;
        }
    }
    @{deep}.btn-prev{
        font-size: 12px !important;
        font-family: PingFang SC-Regular, PingFang SC !important;
        font-weight: 400 !important;
        // color: #666666 !important;
        height: 28px !important;
        line-height: 28px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        border-radius: 4px 4px 4px 4px !important;
        background: #F0F1F6 !important;
    }
    @{deep}.btn-next{
        font-size: 12px !important;
        font-family: PingFang SC-Regular, PingFang SC !important;
        font-weight: 400 !important;
        // color: #666666 !important;
        height: 28px !important;
        line-height: 28px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        border-radius: 4px 4px 4px 4px !important;
        background: #F0F1F6 !important;
    }
</style>